<template>
	<div class="travelist">
		<ul class="tab1">
			<li v-for="(item,index) in list" :key="index">
				<img :src="get(item.image)" />
				<p v-if="index>0">{{item.title}}</p>
				<p>
					<span>{{item.productType}}</span>
					<span>{{item.productCat}}</span>
					<span>{{item.days}}</span>
				</p>
				<p>
					<span>{{item.pid}}</span>
					<span>{{item.numLabel}}</span>
				</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'travelist',
		data(){
			return{
				list:[],
				src:[]
			}
		},
		created(){
			this.travelList()
		},
		methods:{
			travelList(){
				this.axios.get("https://m.youxiake.com/api/m/index/flow/recommend?sitecode=1&city_id=1&type=1&page=1").then( (res)=>{
					for(let i in res.data.data.list){
						this.list.push(res.data.data.list[i].dataDetail)
					}
				}).catch( (error)=>{
					console.log(error)
				})
			},
			// 图片
			get(src){
				if(src){
					return 'https://images.weserv.nl/?url='+src;
				}else{
					return src
				}
				console.log(src)
			}
		}
	}
</script>

<style scoped>
.travelist{
	width: 100%;
	height: 100px;
}
.tab1 li:nth-child(2){
	font-size: 0.35rem;
}
.tab1 li{
	border-radius: 0.3rem;
	width: 45%;
	margin-left: 0.28rem;
	margin-top: 0.35rem;
	float: left;
	background-color: lightgrey;
	height:6.4rem ;
	margin-bottom: 0.2rem;
}
.tab1 li:first-child img{
	border-radius: 0.3rem;
	width: 100%;
	height: 6.5rem;
}
.tab1 li:nth-child(2) img{
	width: 100%;
	height: 5rem;
}
.tab1 li img{
	border-radius: 0.2rem 0.2rem 0 0 ;
	width: 100%;
	height: 3.5rem;
}
.tab1 li p:nth-child(2){
	font-size: 0.4rem;
	font-weight: bold;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-indent: 0.5em;
	line-height: 0.6rem;
}
.tab1 li p:nth-child(3) span{
	line-height: 0.5rem;
	font-size: 0.3rem;
	color: gray;
}
.tab1 li p:nth-child(4) span{
	font-size: 0.2rem;
	line-height: 1rem;
}
</style>
